import React, { useState, useEffect } from 'react'
import Retreat from './Retreat'

export default function Sleep() {
  const sleep = [
    { name: '美好梦境-限免', img: '/public/sleep/1.png' },
    { name: '舒眠', img: '/public/sleep/2.png' },
    { name: '美好梦境', img: '/public/sleep/3.png' },
    { name: '晚安', img: '/public/sleep/4.png' }
  ]

  return (
    <div className='box'>
      <Retreat />
      <h1>睡眠</h1>
      <p style={{
        color: '#ccc'
      }}>自然自在，睡个好觉</p>

      <h2>助眠声音</h2>
      <div style={{

      }}>
      </div>
      <h2>
        睡前
        <span style={{
          float: 'right',
          color: 'red',
          fontSize: '1rem'
        }}>更多</span>
      </h2>
      <p style={{
        color: '#ccc'
      }}>随时随刻，开始冥想</p>
      <div style={{
        width: '100%',
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-between'
      }}>
        {sleep.map((i, ind) => {
          return <dl key={i} style={{
            display: 'inline-block',
            width: '44%',
            borderRadius: '1rem',
            margin: '1rem 0',
            padding: '1rem 0'
          }}>
            <dd style={{
              display: 'inline-block',
              width: '100%',
              height: "6rem",
              borderRadius: '1rem',
            }}>
              <img src={i.img} />
            </dd>
            <dt>
              <h4>{i.name}</h4>
            </dt>
          </dl>
        })}
      </div>

      
    </div>
  )
}